<div style="font-weight:bold;font-size:20px;margin-top: 20px;">${serialNumber}、境外人口</div>
<div id="foreign-population-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
</div>
<#--<table  id='table3' style="margin-top:20px;">
    <tr>
        <th>手机归属国家</th>
        <th>人口数量统计</th>
    </tr>
</table>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">表3 来自不同国家的境外人群数量特征</div>-->
<#--<div id="myecharts3" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">图3 来自不同国家的境外人群数量特征</div>-->
<#--<table  id='table4' style="margin-top:15px;">
    <tr>
        <th>地市</th>
        <th>人口数量统计</th>
    </tr>
</table>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">表4 各区域内境外人群分布特征</div>-->
<div id="foreign-population-echarts" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">图3 各区域内境外人群分布特征</div>
<script>
    (function () {
        var dataTable3 = ${dataTable3}
        var dataTable4 = ${dataTable4}
        /*$("#foreign-population-desc").text("截至目前，全省共有境外人员${dataTable3Total}人，由表3可见，" + dataTable3[0].county + "人占所有境外人员的${dataTable3FirstRate}%，人数高达" + dataTable3[0].count + "人，其次是" + dataTable3[1].county + "，人数为" + dataTable3[1].count + "人，占所有境外人员的${dataTable3SecondRate}%。其中，" + dataTable4[0].county + "市内境外人口最多，人数高达" + dataTable4[0].count + "人，占全部境外人口的${dataTable4FirstRate}%，其次是" + dataTable4[1].county + "市，超过" + dataTable4[1].count + "人，" + dataTable4[dataTable4.length-1].county + "市的境外人口最少，人数仅为" + dataTable4[dataTable4.length-1].count + "人，由此可见，境外人口首选地区为" + dataTable4[0].county +"市，其次是"+dataTable4[dataTable4.length-1].county+"市。")*/
        $("#foreign-population-desc").text("${foreignDesc}")
        $(document).ready(function(){
            // $.each(dataTable3,function(index,item){
            //     var tr='<td>'+item.county+'</td>'+'<td>'+item.count+'</td>';
            //     $("#table3").append('<tr>'+tr+'</tr>')
            // });
            // $.each(dataTable4,function(index,item){
            //     var tr='<td>'+item.county+'</td>'+'<td>'+item.count+'</td>';
            //     $("#table4").append('<tr>'+tr+'</tr>')
            // });
            // 境外人口
            // var mapData3 = [{ name: '中国', value: 411.465 }, { name: '加拿大', value: 60508.978 },];
            /*var mapEcharts3=echarts.init(document.getElementById('myecharts3'));
            var outdata3 = $.map(dataTable3, function(n, i){
                return {
                    name: n.county,
                    value: n.count
                }
            });
            var option3 = getOptionMap(outdata3, 'world');
            echarts.registerMap('world', world);
            mapEcharts3.setOption(option3);*/

            // var mapData4 = [{pubArea: "海口", pubCount: 10}, {pubArea: "文昌", pubCount: 813}, {pubArea: "东方", pubCount: 103}];
            /*var mapEcharts4=echarts.init(document.getElementById('myecharts4'));
            var outdata4 = $.map(dataTable4, function(n, i){
                return {
                    name: n.county,
                    value: n.count
                }
            });
            var option4 = getOptionMap(outdata4);
            echarts.registerMap('hainan', hainan);
            mapEcharts4.setOption(option2);*/
            var outdata4 = $.map(dataTable4, function(n, i){
                return {
                    name: n.county,
                    value: n.count
                }
            });
            var option = getOptionMap(outdata4)
            console.log(option)
            echarts.registerMap('hainan', hainan);
            echarts.init(document.getElementById('foreign-population-echarts')).setOption(option);
        });
        function getOptionMap(outdata, map) {
            var mapType = map?map:'hainan'
            var option = {
                tooltip: {
                    show: true,
                    formatter: function (params) {
                        if (params.value) {
                            return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value + '&nbsp;&nbsp;'
                        } else {
                            return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;0&nbsp;&nbsp;'
                        }
                    },
                },
                visualMap: {
                    min: 0,
                    max: ${maxForeignPopulationCount},
                    itemWidth: 10,
                    itemHeight: 89,
                    orient: 'horizontal',
                    left: '50',
                    top: '0',
                    text: ['密', '疏'],
                    textStyle: {
                        color: '#666666',
                        fontSize: 13,
                    },
                    inRange: {
                        color: ['#FFFFFF','#ADFF2F','#ADFF2F','#FFA500','#FF4500','#FF0000'],//['#D9EEFF', '#2F9BFF'],
                    },
                    outOfRange: {
                        show: false,
                    },
                },
                geo: {
                    map: mapType,
                    show: true,
                    roam: false,
                    zoom: 1.2,
                    label: {
                        emphasis: {
                            show: false,
                        },
                    },
                    itemStyle: {
                        normal: {
                            show: false,
                        },
                    },
                },
                series: [
                    {
                        type: 'map',
                        map: mapType,
                        aspectScale: 0.75,
                        zoom: 1.2,
                        label: {
                            normal: {
                                formatter: function (para) {
                                    return '{name|' + para.name + '}'
                                },
                                rich: {
                                    cnNum: {
                                        fontSize: 11,
                                        color: '#333333',
                                        align: 'center',
                                    },
                                    name: {
                                        fontSize: 10,
                                        color: '#333333',
                                        align: 'center',
                                        lineHeight: 20,
                                    },
                                },
                                //formatter: '{b}',
                                color: '#333333',
                                show: mapType==='hainan'?true:false,
                            },
                            emphasis: {
                                show: false,
                            },
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#D9EEFF',
                                borderColor: mapType==='hainan'?'#ffffff':'#5bacee',
                                borderWidth: 1,
                            },
                            emphasis: {
                                areaColor: '#FFAE00',
                            },
                        },
                        data: outdata,
                        nameMap: mapType==='hainan'?
                            {
                                海口: "海口市",
                                三亚: "三亚市",
                                儋州: "儋州市",
                                五指山: "五指山市",
                                琼海: "琼海市",
                                文昌: "文昌市",
                                万宁: "万宁市",
                                东方: "东方市",
                                定安: "定安县",
                                屯昌: "屯昌县",
                                澄迈: "澄迈县",
                                临高: "临高县",
                                白沙: "白沙黎族自治县",
                                昌江: "昌江黎族自治县",
                                乐东: "乐东黎族自治县",
                                陵水: "陵水黎族自治县",
                                保亭: "保亭黎族苗族自治县",
                                琼中: "琼中黎族苗族自治县",
                                南海诸岛: "三沙市",
                            } : {}
                    },
                ],
            }
            return option
        }
    })()
</script>